<template>
	<view class="history">
		<view class="top"></view>
		<view class="book" v-for="(item,index) in history">
			<view class="img-box">
				<image :src="item.bookImg" mode="widthFix"></image>
			</view>
			<view class="content">
				<view class="title">
					{{item.title}}
				</view>
				<view class="author">
					{{item.author}}
				</view>
				<view class="reach">
					观看到:{{item.chapter}}
				</view>
			</view>
			<view class="open" @click="goRead(item.bookId,item.catalogId)">
				继续观看
			</view>
			<view class="del" @click="delHistory(item.bookId)">
				<image src="../../static/del.png" mode="widthFix"></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'history',
		data() {
			return {
				userInfo: [],
				user: [],
				history: [],
			};
		},
		methods: {
			getHistory() {
				let user = uni.getStorageSync('userInfo');
				if (!user) {
					return;
				}
				this.userInfo = JSON.parse(user);
				uniCloud.callFunction({
					name: 'getUser',
					data: {
						phone: this.userInfo.phone
					}
				}).then(res => {
					// console.log('res ==> ', res);
					this.user = res.result.data[0];
					// console.log('this.user ==> ',this.user);
					this.history = res.result.data[0].history;
					console.log('this.history ==> ', this.history);
				}).catch(err => {
					console.log('err ==> ', err);
				})
			},
			delHistory(bookId) {
				// console.log(this.history);
				// console.log(this.userInfo);
				let history = this.history
				let index = history.findIndex((item) => item.bookId === bookId);
				let phone = this.userInfo.phone
				uni.showModal({
					title: '您确定删除这本书籍吗?',
					success(res) {
						if (res.confirm) {
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
							history.splice(index, 1);
							uniCloud.callFunction({
								name: 'addHistory',
								data: {
									phone: phone,
									history: history,
								}
							}).then(res => {
								console.log('res ==> ', res);
							}).catch(err => {
								console.log('err ==> ', err);
							})

						} else if (res.cancel) {
							// uni.showToast({
							// 	title: '取消删除',
							// 	icon: 'none'
							// })
						}
					}
				})
			},
			goRead(bookId,catalogId){
				uni.navigateTo({
					url:`../read/read?bookId=${bookId}&catalogId=${catalogId}`
				})
			}
		},
		onLoad() {
			this.getHistory();
		}
	}
</script>

<style lang="scss">
	.history {
		background-color: #FCECCC;
		min-height: 100vh;
	}

	.top {
		height: 20rpx;
	}

	.book {
		width: 675rpx;
		height: 200rpx;
		margin: 30rpx auto;
		// background-color: red;
		display: flex;
		align-items: center;

		.img-box {
			width: 144rpx;
			height: 190rpx;
			border: 1px solid #FC768A;
			border-radius: 20rpx;

			image {
				width: 100%;
				display: block;
				border-radius: 20rpx;
			}
		}

		.content {
			width: 300rpx;
			margin-left: 30rpx;

			.title {
				font-size: 34rpx;
				font-weight: 700;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.author {
				font-size: 25rpx;
				color: #77828a;
				margin-top: 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.reach {
				font-size: 25rpx;
				color: #a8a8a8;
				margin-top: 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}

		.open {
			width: 120rpx;
			height: 60rpx;
			background: linear-gradient(90deg, #F78817 0%, #E86F2D 100%);
			border-radius: 60rpx;
			text-align: center;
			line-height: 60rpx;
			color: white;
			font-size: 28rpx;
		}

		.del {
			width: 40rpx;
			height: 40rpx;
			margin-left: 34rpx;

			image {
				width: 100%;
				display: block;
			}
		}
	}
</style>